<route>
    {
        meta: {
            enabled: false
        }
    }
</route>

<script setup>
import useUserStore from '@/store/modules/user'
import { ElMessageBox } from 'element-plus'

const userStore = useUserStore()
const searchMore = ref(false)
const currentPage4 = ref(1)
const total = ref(0)

const search = ref({
    personName: '',
    areaName: '',
    bedId: ''
})
const dataList = ref([])

onMounted(() => {
    getList(1)
})

function getList(page) {
    currentPage4.value = page
    const params = {
        page: page - 1,
        size: 10,
        personName: search.value.personName == '' ? undefined : search.value.personName,
        areaName: search.value.areaName == '' ? undefined : search.value.areaName,
        bedId: search.value.bedId == '' ? undefined : search.value.bedId
    }
    userStore.opearateRecords(params).then(res => {
        dataList.value = res
        total.value = res.length
    })

}

function handleFilter() {
    getList()
}

function handleDelete(id, index) {
    ElMessageBox.confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            userStore.deleteAccout(id).then(() => {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
            })
            dataList.value.splice(index, 1)
        })
        .catch(() => {
            // catch error
            ElMessage({
                type: 'info',
                message: '已取消'
            })
        })
}

function handleCurrentChange(val) {
    getList(val)
}

function handleSizeChange() {
}
</script>

<template>
    <div>
        <page-header title="宣传资料播放">
            <template #content>`
                <p>播放记录</p>
            </template>
        </page-header>

        <page-main>
            <el-row>
                <search-bar @toggle="searchMore = $event">
                    <el-form :model="search" size="default" label-width="120px">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="姓名">
                                    <el-input
                                        v-model="search.personName"
                                        placeholder="请输入姓名"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="病区">
                                    <el-input
                                        v-model="search.areaName"
                                        placeholder="请输入病区"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="床号">
                                    <el-input
                                        v-model="search.bedId"
                                        placeholder="请输入床号"
                                        clearable
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item>
                                    <el-button type="primary" @click="handleFilter">
                                        <template #icon>
                                            <el-icon>
                                                <svg-icon name="ep:search" />
                                            </el-icon>
                                        </template>
                                        搜索
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </search-bar>
            </el-row>
            <el-table
                ref="table" :data="dataList" border stripe
            >
                <el-table-column prop="fileName" label="文件名" />
                <el-table-column prop="personName" label="人员姓名" />
                <el-table-column prop="areaName" label="区域姓名" />
                <el-table-column prop="bedId" label="床号" />
                <!-- <el-table-column prop="temp" label="操作" width="220">
                    <template #default="scope">
                        <el-button type="primary" link>
                            <router-link :to="{name: 'manageExampleEdit',query: {id: scope.row.id, name: scope.row.name, username: scope.row.username, role: scope.row.role, group: JSON.stringify(scope.row.group) }}">修改信息</router-link>
                        </el-button>
                        <el-button type="primary" link>
                            <router-link :to="{name: 'managePasswordEdit',query: {id: scope.row.id}}">修改密码</router-link>
                        </el-button>
                        <el-button
                            v-if="scope.row.id != 1" type="primary" link @click="handleDelete(scope.row.id,scope.$index)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div style="padding: 10px 0;">
                <!--内边距空一些-->
                <el-pagination
                    :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
                <!--1.page-sizes一般设置为5，10，15，20-->
                <!--1.page-size一般设置为10，即每页10个-->
            </div>
        </page-main>
    </div>
</template>

<style>
.test {
    width: 6px;
    height: 6px;
    background: #52c41a;
    border-radius: 10px;
    opacity: 1;
    margin: auto 5px;
}
a {
    text-decoration: none;
}
.router-link-active {
    text-decoration: none;
}
</style>
